.index {

    // 主体
    .main {
        section {
            margin: 15px 20px;
        }

        // 排名+打卡
        .main1 {
            display: flex;
            height: 100px;

            .rank {
                width: 1px;
                flex-grow: 1;
                background: #1592cc;
                margin-right: 15px;
                border-radius: 15px;
            }

            .clockin {
                position: relative;
                width: 1px;
                flex-grow: 2;
                background: #7bcbf5;
                border-radius: 15px;
            }

            #clockBtn {
                position: absolute;
                right: 20px;
                bottom: 20px;
                height: 30px;
                color: #fff;
                background: #0a0;
            }
        }

        //运动数据+徽章
        .main2 {
            display: flex;
            height: 100px;

            .sports-data {
                width: 1px;
                flex-grow: 1;
                background: url(../../assets/images/index-card-data.png) no-repeat center center/cover;
                border-radius: 15px;
                margin-right: 15px;
                color: #fff;
                text-indent: 1em;
                line-height: 2em;
            }

            .badge {
                width: 1px;
                flex-grow: 1;
                border-radius: 15px;
                background: #7bcbf5;
            }
        }

        .main3 {
            background: url(../../assets/images/index-swiper-bg2.jpg) no-repeat center center;
            background-size: cover;
            height: 100px;
            border-radius: 15px;
            color: #fff;
            text-indent: 1em;
            line-height: 2em;

            a {
                color: #fff;
            }
        }

        .main4 {
            background: url(../../assets/images/index-card-run.png) no-repeat center center;
            background-size: cover;
            height: 100px;
            border-radius: 15px;
            text-indent: 1em;
            line-height: 2em;

            a {
                color: #fff;
            }
        }
    }

    // 横幅轮播图
    .swiper {
        width: 100%;
        height: 200px;
        background: #f00;

        .slider1 {
            background: url(../../assets/images/course-img02.png) no-repeat center center;
            background-size: cover;
        }

        .slider2 {
            background: url(../../assets/images/course-img03.jpg) no-repeat center center;
            background-size: cover;
        }

        .slider3 {
            background: url(../../assets/images/course-img04.jpg) no-repeat center center;
            background-size: cover;
        }
    }
}